import React, { useState, useEffect } from 'react';
import { Select } from 'antd'
import SelectedLists from './SelectedLists';
import services from 'src/services/api'

export default function Feature(props) {
  const [events, setEvents] = useState([])
  const [feature, setFeature] = useState([])
  const [eventId, setEventId] = useState(props.event_id)
  useEffect(() => {
    getEvents(props.app_id)
  }, [props.app_id])

  useEffect(() => {
    setEventId(props.event_id)
  }, [props.event_id])

  useEffect(() => {
    if (props.app_id !== undefined && props.event_id !== undefined) {
      getFeature(props.app_id, props.event_id)
    }
  }, [props.app_id, props.event_id])

  // 获取指标
  function getFeature(app_id, event_id) {
    services.indicator.getVariableList({ app_id, event_id }).then(res => {
      setFeature(res.data);
      props.onHandleResultLength(res.data.length)
    });
  }

  // 获取事件
  function getEvents(app_id) {
    services.event.getEventCodeList({ app_id }).then(res => {
      if (res.code === 0) {
        setEvents(res.data);
      }
    });
  }

  return (
    <div>

      <Select value={eventId} style={{ width: '200px', marginBottom: '10px' }} onChange={value => { setEventId(value); getFeature(props.app_id, value) }}>
        {
          events.filter(it => it.event_id !== -1).map(item => {
            return <Select.Option key={item.event_id} value={item.event_id}>{item.event_name}</Select.Option>
          })
        }

      </Select>
      <SelectedLists {...props} data={feature} event_id={eventId} />
    </div>
  );
}
